<!-- 模板 -->
<template>
    <div class="app-container" id="Mall">
        <!-- 平台基本信息展示 -->
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <h2>商城首页配置</h2>
            </div>
            <div class="card">
                <el-form v-model="listQuery" ref="listQuery" label-width="230px" class="num"
                    style="width: 60%;margin-left: 220px;">
                    <el-form-item label="商场地址"  prop="shopping_mall_address" >
                        <el-input v-model="listQuery.shopping_mall_address" @blur="salaryChangeOrder"></el-input>
                    </el-form-item>
                    <el-form-item label="商城名称"  prop="shopping_mall_name">
                        <el-input v-model="listQuery.shopping_mall_name"></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话" prop="shopping_mall_phone">
                        <el-input v-model="listQuery.shopping_mall_phone" ></el-input>
                    </el-form-item>
                    <el-form-item label="联系QQ" prop="shopping_mall_qq">
                        <el-input v-model="listQuery.shopping_mall_qq"  ></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <el-form>
                <el-form-item style="float: right;">
                    <el-button type="primary" @click="handleUpdate">确定</el-button>
                    <el-button @click="handleCancel">取消</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>
<script >
import { listMall,updateConfig } from '@/api/config/mall.js'
export default {
    name: 'Mall',
    data() {
        return {
            listQuery: {},
            total:0,
        }

    },
    props: [],
    components: {

    },
    created() {
        // 数据初始化
        this.getData()
    },
    mounted() {
    },
    methods: {
        handleCancel(){
            this.getData();
            this.$message({
                message:'已取消'
            })
        },
        handleUpdate(){
            updateConfig(this.listQuery).then(res=>{
                console.log(res);
                this.$message({
                 message:'修改成功',
                 type:'success'
                })
                this.getData();
                this.listQuery={}
            })
        },
        getData() {
        listMall(this.listQuery).then(res => {
            console.log(res);
            this.listQuery={}
            this.listQuery = res.data.data;
            this.total = res.data.data.total;
        })
    },
    salaryChangeOrder(e){
        this.listQuery.order=e.target.value
    }
    },
    
}
</script>
<style rel="stylesheet/scss" lang='scss' scoped>
.card {
    width: 100%;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
</style>
